<template>
	<!-- 列表-->
	<view class="list">
		<view class="item" v-for="(item, index) in order" :key="index">
			<view class="header">
				<view class="time">{{ item.createTime }}</view>
				<view class="state">{{ resolveOrderStatus(item.orderStatus) }}</view>
			</view>
			<view class="top">
				<image :src="resolveImagePath(item.picture)"></image>
				<view class="title">{{ item.goodsName }}</view>
			</view>
			<view class="right">
				<view class="text">共 {{ item.quantity }} 件 实付：{{ item.totalPrice }}</view>
				<view class="option-box">
					<view class="option-item 2-option" @Click="deleteOrder(item)">删除订单</view>
					<view class="option-item 1-option" @click="pay(item)"
						v-if="item.orderStatus !== 2 && item.orderStatus !== 3">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {listOrder} from '../../api/order.js'
	export default {
		data() {
			return {
				order: [], // 用于存储订单数据
			};
		},
		created() {
			this.fetchOrders(); // 页面加载时调用获取订单的方法
		},
		methods: {
			async fetchOrders() {
				// debugger
				let res =  await listOrder();
				this.order = res.data
				console.log( this.order);
			},
			async deleteOrder(order) {
				try {
					const response = await uni.request({
						url: 'http://localhost:8080/app/expend/delete/' + order.id, // 替换为实际后端删除订单的 API 地址
						method: 'POST',
						data: {
							orderId: order.id, // 传递订单 ID
						},
					});

					if (response.statusCode === 200) {
						if (response.data.code === 2000) {
							// 删除成功后更新订单列表
							this.order = this.order.filter(o => o.id !== order.id);
							uni.showToast({
								title: '订单删除成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: response.data.msg || '订单删除失败',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('请求错误:', error);
					uni.showToast({
						title: '删除失败，请重试',
						icon: 'none'
					});
				}
			},

			//定义支付订单的方法
			async pay(order) {
				console.log(order);
				window.open('http://localhost:8080/alipay/pay?orderNo=' + order.orderNumber);
			},
			// 拼接图片路径的方法
			resolveImagePath(relativePath) {
				return `http://localhost:8080/${relativePath}`; // 根据实际后端域名拼接
			},
			// 将状态码转换为描述文字
			resolveOrderStatus(status) {
				switch (status) {
					case 1:
						return '待支付';
					case 2:
						return '已支付';
					case 3:
						return '已取消';
					default:
						return '未知状态';
				}
			},
		},
	};
</script>

<style>
	.list {
		.item {
			background: #f9f9f9;
			padding: 24rpx;
			margin-top: 24rpx;

			.header {
				height: 30px;
			}

			.time {
				height: 30px;
				float: left;
			}

			.state {
				height: 30px;
				float: right;
			}

			.top {
				display: flex;
				margin-top: 24rpx;

				image {
					width: 180rpx;
					height: 180rpx;
					margin-right: 12rpx;
				}

				.title {}
			}

			.right {

				.text,
				.option-box {
					display: flex;
					justify-content: end;
				}

				.option-item {
					border: 1px solid #909399;
					padding: 12rpx 24rpx;
					border-radius: 32rpx;

					&:not(:last-child) {
						margin-right: 24rpx;
					}

					.option-box {
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>